<template>
    <div class="page">
        公司需要得图样得demo例子
        <div id="container"></div>
    </div>
</template>
<script>
import * as d3 from "d3"
export default {
    data() {
        return {
            city: {
                name: "中国",
                children: [
                    {
                        name: "浙江",
                        children: [
                            { name: "杭州", children: [{ name: "余杭区" }] }
                        ]
                    },
                    {
                        name: "广西",
                        children: [
                            {
                                name: "桂林"
                                // children: [{ name: "秀峰区" }]
                            }
                        ]
                    },
                    {
                        name: "四川",
                        children: [
                            {
                                name: "成都",
                                children: [{ name: "双流" }]
                            }
                        ]
                    },
                    {
                        name: "河南",
                        children: [
                            {
                                name: "郑州",
                                children: [{ name: "邓县" }]
                            }
                        ]
                    }
                ]
            }
        }
    },
    methods: {
        initChart() {
            this.svgWidth = 800
            this.svgHeight = 800
            this.svg = d3
                .select("#container")
                .append("svg")
                .attr("width", this.svgWidth)
                .attr("height", this.svgHeight)
            //所有的图形都放在 g 组里面
            this.gTree = this.svg
                .append("g")
                .attr("transform", `translate(${40},${0})`)
            //所有的线段放到 一个g组里面
            this.linksGroup = this.gTree
                .append("g")
                .attr("fill", "none")
                .attr("stroke", "#555")
                .attr("stroke-opacity", 0.4)
                .attr("stroke-width", 1.5)
                .attr("class", "linksGroup")
            //所有的节点以及节点的文字放在一个g组里面
            this.nodesGroup = this.gTree
                .append("g")
                .attr("stroke-linejoin", "round")
                .attr("stroke-width", 3)
                .attr("class", "nodesGroup")
            //定义箭头 图形，后面得线段需要使用
            this.gTree
                .append("defs")
                .append("marker")
                .attr("id", "arrow")
                .attr("viewBox", "0 0 12 12")
                .attr("refX", 30)
                .attr("refY", 6)
                .attr("markerWidth", 12)
                .attr("markerHeight", 12)
                .attr("orient", "auto")
                .append("path")
                .attr("fill", "red")
                .attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2")
            this.gTree
                .append("defs")
                .append("marker")
                .attr("id", "arrow-blue")
                .attr("viewBox", "0 0 12 12")
                .attr("refX", 30)
                .attr("refY", 6)
                .attr("markerWidth", 12)
                .attr("markerHeight", 12)
                .attr("orient", "auto")
                .append("path")
                .attr("fill", "blue")
                .attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2")    
            this.draw()
        },
        formatChartData(data) {
            let root = d3.hierarchy(data)
            let treeLayout = d3
                .tree()
                .size([this.svgHeight - 50, this.svgWidth - 200])
            treeLayout(root)
            let descendants = root.descendants()
            let realLinks = [],
                links = root.links()
            //手动创建一个 node节点，
            let des = descendants[0].copy()
            des.height = 0
            des.depth = 0
            des.depth = 0
            des.x = descendants[0].x
            des.y = this.svgWidth - 70
            des.data = { name: "目标" }
            delete des.children
            descendants.push(des)
            for (let i = 0; i < links.length; i++) {
                realLinks.push(links[i].source.path(links[i].target))
            }
            let leaves = descendants[0].leaves(),
                otherLinks = []
            //===============应该是在这里遍历node，确认每个节点是 哪条路径
            for (let i = 0; i < leaves.length; i++) {
                let ancestors = leaves[i].ancestors();
                ancestors.pop();
                ancestors.forEach(node => {
                    node.data.line = `line${i}`
                })
                otherLinks.push([
                    leaves[i],
                    des
                ])
            }
            return {
                nodes: descendants,
                links: realLinks,
                otherLinks: otherLinks
            }
        },
        draw() {
            //数据转换。
            let chartData = this.formatChartData(this.city)
            console.log(chartData)
            let node = this.nodesGroup
                .selectAll("g")
                .data(chartData.nodes)
                .join("g")
                .attr('class',d=>`node ${d.data.line}`)
                .attr("transform", d => `translate(${d.y},${d.x})`) //这里x,y颠倒是为了画从左到右的树型
            node.append("circle")
                .attr("fill", d => (d.depth ? "#ccc" : "orange"))
                .attr("r", 30)
            node.append("text")
                .attr("dy", "0.31em")
                .attr("text-anchor", "middle")
                .text(d => d.data.name)
                .attr("font-size", 14)
            this.linksGroup
                .selectAll(".link")
                .data(chartData.links)
                .join("path")
                .attr("class", d => {
                    //根据 节点所属路径 添加class
                    return `link ${d[1].data.line}`
                })
                .attr(
                    "d",
                    d3
                        .line()
                        .curve(d3.curveStep)
                        .x(d => d.y)
                        .y(d => d.x)
                )
                .attr("marker-end", `url(#arrow)`)
            this.linksGroup
                .selectAll(".otherlink")
                .data(chartData.otherLinks)
                .join("path")
                .attr("class", d => {
                    return `otherlink ${d[0].data.line}`
                })
                .attr(
                    "d",
                    d3
                        .line()
                        .curve(d3.curveStepAfter)
                        .x(d => d.y)
                        .y(d => d.x)
                )
                .attr("marker-end", `url(#arrow)`)
            //根据选择了路径更改 路径上 线段和 节点的颜色
            this.linksGroup.selectAll(".line1").attr("stroke", "blue")
            .attr('marker-end','url(#arrow-blue)')
            this.nodesGroup.selectAll(".line1").select('circle')
            .attr('fill','blue')
        }
    },
    mounted() {
        this.initChart()
    }
}
</script>
